<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css" th:href="@{/bootstrap/css/bootstrap.min.css}"/>
<script src="../js/jquery.min.js" th:src="@{/js/jquery.min.js}"></script>
<script src="../bootstrap/js/bootstrap.min.js" th:src="@{/bootstrap/js/bootstrap.min.js}"></script>
<script src="../js/main.js" th:src="@{/js/main.js}"></script>	

<link rel="stylesheet" href="../font-awesome-4.7.0/css/font-awesome.min.css" th:href="@{/font-awesome-4.7.0/css/font-awesome.min.css}"/>
<style type="text/css">
<!--
#loginModal{
  position: absolute;
  top: 50%;
  height:63%;
  -webkit-transform: translateY(-50%);
  -moz-transform:  translateY(-50%);
  -ms-transform:  translateY(-50%);
  -o-transform:  translateY(-50%);
  transform:  translateY(-50%);	
}
-->
</style>
<script type="text/javascript" th:inline="javascript">
/*<![CDATA[*/
function initContent(){
	if(null != messages && '' != messages){
		$("#messDiv").html(messages);
		$("#messDiv").show();
	}
}

function to_login(){
	var tmpval1 = $("#userName").val();
	var tmpval2 = $("#passWord").val();
	
	$.ajax({
           url: '/user/login',
           type: 'POST',
           crossDomain: true,
           dataType: 'json',
           contentType: 'application/json',
           data: JSON.stringify({
             'loginName': tmpval1,
             'pwd': tmpval2
           }),
           success: function (r) {
             if (r.header.code === '200' || r.header.code === '202') {
               localStorage.setItem('uid', r.body.uid)
               localStorage.setItem('token', r.body.token)             
               
               sessionStorage.setItem('uid', r.body.uid)
               sessionStorage.setItem('token', r.body.token)
               
               
               var Days = 1; 
               var exp = new Date(); 
               exp.setTime(exp.getTime() + Days*24*60*60*1000); 
               document.cookie = "uid="+ escape (r.body.uid) + ";expires=" + exp.toGMTString(); 
               document.cookie = "acc-token="+ escape (r.body.token) + ";expires=" + exp.toGMTString();
               
               to_main()
             } else {
               $("#messDiv").html(r.header.message);
       		   $("#messDiv").show();
             }
           }
    })
}

function to_main(){
	 var frame = $("#ifm1");

     var form = $("<form>");
     form.attr("method","post");
     form.attr("action","/main");

     var input1 = $("<input>");
     input1.attr("type","hidden");
     input1.attr("name","uid");
     input1.attr("value",sessionStorage.getItem("uid"));
     
     var input1 = $("<input>");
     input1.attr("type","hidden");
     input1.attr("name","token");
     input1.attr("value",sessionStorage.getItem("token"));

     frame.append(form);
     form.append(input1);
     form.submit();
     form.remove();
}
/*]]>*/
</script>
</head>
<body style="background-color:rgba(0,0,0,0.6);">
<div class="modal show" id="loginModal">
        <div class="modal-dialog">
            <div class="modal-content" style="width:70%;margin:0 15%;">
                <div class="modal-header">
                    <h1 class="text-center" style="color:#3C8686;">登录</h1>
                </div>
                <div class="modal-body" style="min-height:150px;">
                	<iframe id="ifm1" style="height:0px;border:0px;"></iframe>
                    <form class="form col-md-12 center-block" id="loginForm" th:action="@{/login}" th:method="post">
                        <div class="form-group"  id="accountDiv">
                            <label class="sr-only" for="inputAccount">用户名</label>
                            <div class="input-group">
                                <div class="input-group-addon"><span class="glyphicon glyphicon-user" aria-hidden="true"></span></div>
                                <input class="form-control editobj" id="userName" name="userName" type="text" placeholder="账号"/>
                            </div>                          
                        </div>
                        <br/>
                        <div class="form-group" id="pwdDiv">
                            <label class="sr-only" for="inputPassword">密码</label>
                            <div class="input-group">
                                <div class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></div>
                                <input class="form-control editobj" id="passWord" name="passWord" type="password" placeholder="密码"/>
                                <div class="input-group-addon"><span class="glyphicon glyphicon-eye-open"></span></div>
                            </div>                       
                        </div>  
                        <div id="messDiv" style="display:none;color:#f00;">
                        </div>                 
                    </form>
                </div>
                <div class="modal-footer">
                	<div class="form-group">                           
                        <button class="btn btn-private1" type="button" onclick="to_login()"><i class="fa fa-sign-in"></i>&nbsp;&nbsp;登录</button>
                        <button class="btn btn-private2" type="button" onclick="to_cancel()"><i class="fa fa-sign-out"></i>&nbsp;&nbsp;取消</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
